<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>盒子处理</title>
    <style>
        ul li {
            float: left;
            list-style: none;
            width: 100px;
            height: 200px;
            border: 10px solid skyblue;
            background-color: greenyellow;
            margin-left: -10px;
            /* 不启用margin-left时相隔的两个盒子边框厚度会变为20px */
            /* 让每个盒子向前10px盖住前面的10px边框 */
        }
        
        ul li:hover {
            position: relative;
            z-index: 10;
            /* z-index要求position不能为static属性, */
            border-color: red;
        }
    </style>
</head>

<body>
    <ul>
        <li>hz1</li>
        <li>hz2</li>
        <li>hz3</li>
        <li>hz4</li>
        <li>hz5</li>
    </ul>
    <div>
        <img src="../media_resourcing/cat_face.jpg" alt="">
    </div>

</body>

</html>